<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar title="分类" :fixed="true" >
      <template #left>
        <van-icon @click="goBack" name="arrow-left" size="18" /> <span style="color:#2891FA"  @click="goBack">返回</span>
      </template>
      <template #right>
        <van-icon @click="serachCate" name="search" size="18" />
      </template>
    </van-nav-bar>
    <!-- 侧边导航 -->
    <div class="sidebarBox">
      <van-sidebar v-model="activeKey" @change="onIndexChange" :fixed="true" ref="navwrap">
        <van-sidebar-item
          :class="{itemColor:activeKey=== index}"
          v-for="(item, index) in navSidebarlist"
          :key="index"
          :title="item"
        />
      </van-sidebar>
      <!-- 右边区域 -->
      <!-- <van-index-bar ref="selectIndexRef" :index-list="navSidebarlist" @select='getSelectIndex'>
        <van-index-anchor :index='0' /> -->
        <div class="leftSection" v-if="activeKey===0">
          <van-grid :border="false" :column-num="1">
            <van-grid-item>
              <van-image
                class="imgSize"
                src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/2020e451744f8ec947e56d8ccccb7862.jpg?f=webp&w=750&h=300&bg=F97F67"
              />
            </van-grid-item>
          </van-grid>
          <!-- 分割线 -->
          <p class="textAlign">
            <span>——</span>&nbsp;&nbsp;
            <e>小米数字系列</e>&nbsp;&nbsp;
            <span>——</span>
          </p>
          <!-- 产品小布局 -->
          <van-grid :border="false" :column-num="3">
            <van-grid-item
              icon="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/2a47c566e14b2da1a6cc0780060a59d0.png?thumb=1&w=120&h=120"
              text="小米10 至尊版"
            />
            <van-grid-item
              icon="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/58a4446432aba7894e957f2c18853562.png?thumb=1&w=120&h=120"
              text="小米10 青春"
            />
            <van-grid-item
              icon="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/b54738f4dce4588f9bd29a5dadf76030.png?thumb=1&w=120&h=120"
              text="小米10 pro"
            />
            <van-grid-item
              icon="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/acf2e521e29e5afabf6d493203b31f27.png?thumb=1&w=120&h=120"
              text="小米10"
            />
          </van-grid>
          <!-- 分割线 -->
          <p class="textAlign">
            <span>——</span>&nbsp;&nbsp;
            <e>小米MIX系列</e>&nbsp;&nbsp;
            <span>——</span>
          </p>
          <!-- 产品小布局 -->
          <van-grid :border="false" :column-num="3">
            <van-grid-item
              icon="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/266ad6dd5146deaf3ae3602a89e7a217.png?thumb=1&w=120&h=120"
              text="小米MIX Alpha"
            />
          </van-grid>
          <!-- 分割线 -->
          <p class="textAlign">
            <span>——</span>&nbsp;&nbsp;
            <e>小米手机配件</e>&nbsp;&nbsp;
            <span>——</span>
          </p>
          <van-grid :border="false" :column-num="3">
            <van-grid-item
              icon="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/901c89ad5e92c6408980decd7a79b739.png?thumb=1&w=120&h=120"
              text="无线充电"
            />
            <van-grid-item
              icon="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/4383a79a1646760515fd312d6d2cbeed.png?thumb=1&w=120&h=120"
              text="车充"
            />
            <van-grid-item
              icon="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/299b5373e77b8ad1f315db3a997c8728.png?thumb=1&w=120&h=120"
              text="手机保护壳"
            />
          </van-grid>
        </div>
        <div class="leftSection" v-if="activeKey===1">
          <van-grid :border="false" :column-num="1">
            <van-grid-item>
              <van-image
                class="imgSize"
                src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/9da143d6e1bbce78cda92d4be76bf4e5.jpg?f=webp&w=750&h=300&bg=FFFFFF"
              />
            </van-grid-item>
          </van-grid>
          <!-- <-- 分割线 --> -->
          <p class="textAlign">
            <span>——</span>&nbsp;&nbsp;
            <e>Red红米K系列</e>&nbsp;&nbsp;
            <span>——</span>
          </p>
          <!-- 产品小布局 -->
          <van-grid :border="false" :column-num="3">
            <van-grid-item
              icon="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/ea78a429738f84c43ff0d0859acdfd39.png?thumb=1&w=120&h=120"
              text="K30 至尊版"
            />
            <van-grid-item
              icon="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/a69571b4148f5e59c251658adae6db60.png?thumb=1&w=120&h=120"
              text="K30 Pro"
            />
            <van-grid-item
              icon="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/46f95bd552fa134820a7daea19e507ef.png?thumb=1&w=120&h=120"
              text="K30 Pro 变焦版"
            />
            <van-grid-item
              icon="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/294268746df2a11c188f6d504efc49b4.png?thumb=1&w=120&h=120"
              text="Redmi K30i"
            />
            <van-grid-item
              icon="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/efd0aa03675839c8f20e8c38de8229c1.png?thumb=1&w=120&h=120"
              text="Redmi K30 4G"
            />
          </van-grid>
          <!-- 分割线 -->
          <p class="textAlign">
            <span>——</span>&nbsp;&nbsp;
            <e>Red红米X系列</e>&nbsp;&nbsp;
            <span>——</span>
          </p>
          <!-- 产品小布局 -->
          <van-grid :border="false" :column-num="3">
            <van-grid-item
              icon="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/9238e61fd42fec7aa8b6ace4af7dbda6.png?thumb=1&w=120&h=120"
              text="10X 5G"
            />
            <van-grid-item
              icon="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/20b905a5bdfd17efac7c45f5c4257644.png?thumb=1&w=120&h=120"
              text="10X Pro 5G"
            />
            <van-grid-item
              icon="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/e33cb1ebca8a91a3c1031b5bae47e1da.png?thumb=1&w=120&h=120"
              text="10X 4G"
            />
          </van-grid>
        </div>
        <div class="leftSection" v-if="activeKey===2">
          <van-grid :border="false" :column-num="1">
            <van-grid-item>
              <van-image
                class="imgSize"
                src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/2020e451744f8ec947e56d8ccccb7862.jpg?f=webp&w=750&h=300&bg=F97F67"
              />
            </van-grid-item>
          </van-grid>
          <!-- 分割线 -->
          <p class="textAlign">
            <span>——</span>&nbsp;&nbsp;
            <e>小米数字系列</e>&nbsp;&nbsp;
            <span>——</span>
          </p>
          <!-- 产品小布局 -->
          <van-grid :border="false" :column-num="3">
            <van-grid-item
              icon="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/2a47c566e14b2da1a6cc0780060a59d0.png?thumb=1&w=120&h=120"
              text="小米10 至尊版"
            />
            <van-grid-item
              icon="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/58a4446432aba7894e957f2c18853562.png?thumb=1&w=120&h=120"
              text="小米10 青春"
            />
            <van-grid-item
              icon="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/b54738f4dce4588f9bd29a5dadf76030.png?thumb=1&w=120&h=120"
              text="小米10 pro"
            />
            <van-grid-item
              icon="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/acf2e521e29e5afabf6d493203b31f27.png?thumb=1&w=120&h=120"
              text="小米10"
            />
          </van-grid>
          <!-- 分割线 -->
          <p class="textAlign">
            <span>——</span>&nbsp;&nbsp;
            <e>小米MIX系列</e>&nbsp;&nbsp;
            <span>——</span>
          </p>
          <!-- 产品小布局 -->
          <van-grid :border="false" :column-num="3">
            <van-grid-item
              icon="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/266ad6dd5146deaf3ae3602a89e7a217.png?thumb=1&w=120&h=120"
              text="小米MIX Alpha"
            />
          </van-grid>
          <!-- 分割线 -->
          <p class="textAlign">
            <span>——</span>&nbsp;&nbsp;
            <e>小米手机配件</e>&nbsp;&nbsp;
            <span>——</span>
          </p>
          <van-grid :border="false" :column-num="3">
            <van-grid-item
              icon="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/901c89ad5e92c6408980decd7a79b739.png?thumb=1&w=120&h=120"
              text="无线充电"
            />
            <van-grid-item
              icon="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/4383a79a1646760515fd312d6d2cbeed.png?thumb=1&w=120&h=120"
              text="车充"
            />
            <van-grid-item
              icon="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/299b5373e77b8ad1f315db3a997c8728.png?thumb=1&w=120&h=120"
              text="手机保护壳"
            />
          </van-grid>
        </div>
         <div class="leftSection" v-if="activeKey===3">
          <van-grid :border="false" :column-num="1">
            <van-grid-item>
              <van-image
                class="imgSize"
                src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/9da143d6e1bbce78cda92d4be76bf4e5.jpg?f=webp&w=750&h=300&bg=FFFFFF"
              />
            </van-grid-item>
          </van-grid>
          <!-- <-- 分割线 --> -->
          <p class="textAlign">
            <span>——</span>&nbsp;&nbsp;
            <e>Red红米K系列</e>&nbsp;&nbsp;
            <span>——</span>
          </p>
          <!-- 产品小布局 -->
          <van-grid :border="false" :column-num="3">
            <van-grid-item
              icon="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/ea78a429738f84c43ff0d0859acdfd39.png?thumb=1&w=120&h=120"
              text="K30 至尊版"
            />
            <van-grid-item
              icon="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/a69571b4148f5e59c251658adae6db60.png?thumb=1&w=120&h=120"
              text="K30 Pro"
            />
            <van-grid-item
              icon="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/46f95bd552fa134820a7daea19e507ef.png?thumb=1&w=120&h=120"
              text="K30 Pro 变焦版"
            />
            <van-grid-item
              icon="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/294268746df2a11c188f6d504efc49b4.png?thumb=1&w=120&h=120"
              text="Redmi K30i"
            />
            <van-grid-item
              icon="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/efd0aa03675839c8f20e8c38de8229c1.png?thumb=1&w=120&h=120"
              text="Redmi K30 4G"
            />
          </van-grid>
          <!-- 分割线 -->
          <p class="textAlign">
            <span>——</span>&nbsp;&nbsp;
            <e>Red红米X系列</e>&nbsp;&nbsp;
            <span>——</span>
          </p>
          <!-- 产品小布局 -->
          <van-grid :border="false" :column-num="3">
            <van-grid-item
              icon="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/9238e61fd42fec7aa8b6ace4af7dbda6.png?thumb=1&w=120&h=120"
              text="10X 5G"
            />
            <van-grid-item
              icon="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/20b905a5bdfd17efac7c45f5c4257644.png?thumb=1&w=120&h=120"
              text="10X Pro 5G"
            />
            <van-grid-item
              icon="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/e33cb1ebca8a91a3c1031b5bae47e1da.png?thumb=1&w=120&h=120"
              text="10X 4G"
            />
          </van-grid>
        </div>
         <div class="leftSection" v-if="activeKey===4">
          <van-grid :border="false" :column-num="1">
            <van-grid-item>
              <van-image
                class="imgSize"
                src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/9da143d6e1bbce78cda92d4be76bf4e5.jpg?f=webp&w=750&h=300&bg=FFFFFF"
              />
            </van-grid-item>
          </van-grid>
          <!-- <-- 分割线 --> -->
          <p class="textAlign">
            <span>——</span>&nbsp;&nbsp;
            <e>Red红米K系列</e>&nbsp;&nbsp;
            <span>——</span>
          </p>
          <!-- 产品小布局 -->
          <van-grid :border="false" :column-num="3">
            <van-grid-item
              icon="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/ea78a429738f84c43ff0d0859acdfd39.png?thumb=1&w=120&h=120"
              text="K30 至尊版"
            />
            <van-grid-item
              icon="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/a69571b4148f5e59c251658adae6db60.png?thumb=1&w=120&h=120"
              text="K30 Pro"
            />
            <van-grid-item
              icon="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/46f95bd552fa134820a7daea19e507ef.png?thumb=1&w=120&h=120"
              text="K30 Pro 变焦版"
            />
            <van-grid-item
              icon="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/294268746df2a11c188f6d504efc49b4.png?thumb=1&w=120&h=120"
              text="Redmi K30i"
            />
            <van-grid-item
              icon="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/efd0aa03675839c8f20e8c38de8229c1.png?thumb=1&w=120&h=120"
              text="Redmi K30 4G"
            />
          </van-grid>
          <!-- 分割线 -->
          <p class="textAlign">
            <span>——</span>&nbsp;&nbsp;
            <e>Red红米X系列</e>&nbsp;&nbsp;
            <span>——</span>
          </p>
          <!-- 产品小布局 -->
          <van-grid :border="false" :column-num="3">
            <van-grid-item
              icon="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/9238e61fd42fec7aa8b6ace4af7dbda6.png?thumb=1&w=120&h=120"
              text="10X 5G"
            />
            <van-grid-item
              icon="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/20b905a5bdfd17efac7c45f5c4257644.png?thumb=1&w=120&h=120"
              text="10X Pro 5G"
            />
            <van-grid-item
              icon="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/e33cb1ebca8a91a3c1031b5bae47e1da.png?thumb=1&w=120&h=120"
              text="10X 4G"
            />
          </van-grid>
        </div>
      <!-- </van-index-bar> -->
    </div>
    <common-footer></common-footer>
  </div>
</template>
<script>
export default {
  data () {
    return {
      // 侧边导航索引
      activeKey: 0,
      navSidebarlist: [
        '小米手机最美',
        'redmi手机妮妮',
        '黑鲨手机',
        '5G合约',
        '小米众筹',
        '电视',
        '大电脑',
        '电脑办公',
        '大家电',
        '路由器'
      ]
      // 右边区域循环数据
    }
  },
  mounted () {
    this.getNavSidebarlist()
  },
  methods: {
    // 获取侧边列表数据
    async getNavSidebarlist () {},
    // 当点击得索引发生变化时
    onIndexChange (index) {
    },
    getSelectIndex (idx) {
      this.activeKey = idx
    },
    // 点击搜索
    serachCate () {
      this.$router.push('/serch')
    },
    // 退回
    goBack () {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="less" scoped>
.van-sidebar {
  width: 90px;
  flex: 1;
}
.van-sidebar-item {
  text-align: center;
}
.itemColor {
  font-size: 16px;
  color: tomato;
}
.sidebarBox {
  margin-top: 45px;
  display: flex;
}
.leftSection {
  // margin-left: 100px;
  flex: 3;
}
[data-v-100e6b16] span {
  color: #ececec;
}
.textAlign {
  text-align: center;
}
/deep/.van-icon__image {
  width: 70px;
  height: 70px;
}
[data-v-100e6b16] .van-sidebar {
  position: fixed;
  left: 0;
}
/deep/.van-grid-item__content {
  padding: 8px 4px;
}
.imgSize {
  padding: 6px;
}
// /deep/.van-index-bar__sidebar{
//     display: none;
// }
.leftSection {
  height: 792px;
}
.sectionShow {
  display: none;
}
</style>
